<template>
  <div class="app-container">
    <!-- 侧边栏区域 -->
    <el-aside class="sidebar" :class="{ 'collapsed': isCollapsed }" :width="isCollapsed ? '70px' : '240px'">
      <div class="logo-container">
        <div class="logo-image">
          <i class="el-icon-user menu-icon"></i>
        </div>
        <div class="logo-title"  v-show="!isCollapsed">人生管理系统</div>
      </div>
      <div class="menu-search-bar" v-show="!isCollapsed">
        <el-input
          v-model="menuSearch"
          placeholder="搜索菜单"
          size="small"
          clearable
          @input="handleMenuSearch"
          class="custom-menu-search"
          style="border: none;"
        />
      </div>
      <el-menu
        @select="addTab"
        :default-active="'IndexPagVew'"
        class="custom-menu"
        :collapse="isCollapsed"
      >
        <template v-for="item in filteredMenu">
          <el-menu-item v-if="!item.children" :index="item.index" :key="item.index">
            <i v-if="item.icon" :class="item.icon + ' menu-icon'" />
            <span class="menu-text" v-html="highlightMenu(item.title)"></span>
            <div class="menu-item-bg"></div>
          </el-menu-item>
          <el-submenu v-else :index="item.index" :key="item.index">
            <template slot="title">
              <i v-if="item.icon" :class="item.icon + ' menu-icon'" />
              <span class="menu-text" v-html="highlightMenu(item.title)"></span>
            </template>
            <el-menu-item v-for="sub in item.children" :index="sub.index" :key="sub.index">
              <span class="menu-text" v-html="highlightMenu(sub.title)"></span>
              <div class="menu-item-bg"></div>
            </el-menu-item>
          </el-submenu>
        </template>
      </el-menu>
    </el-aside>
    <!-- 主内容区域 -->
    <div class="main-container">
      <el-header>
        <div class="header-title">
          <div class="header-action-btn" @click="toggleCollapse">
            <i :class="isCollapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
          </div>
          {{ currentTitle }}
        </div>
        <div class="header-actions">
          <div class="header-action-btn">
            <i class="el-icon-bell"></i>
          </div>
          <div class="header-action-btn">
            <i class="el-icon-setting"></i>
          </div>
          <el-dropdown @command="handleUserCommand">
            <span class="header-action-btn" style="padding: 0;">
              <i class="el-icon-user"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-main>
        <div class="tabs-container">
          <el-tabs v-model="activeTab" type="card" closable @tab-remove="removeTab">
            <el-tab-pane
              v-for="tab in tabs"
              :key="tab.name"
              :label="tab.title"
              :name="tab.name"
              :closable="tab.name !== 'IndexPagVew'"
            >
              <div class="tab-content">
                <IndexPagVew v-if="tab.name === 'IndexPagVew'" />
                <PersonnelList v-if="tab.name === 'PersonnelList'" />
                <RkdView v-if="tab.name === 'RkdView'" />
                <CkdView v-if="tab.name === 'CkdView'" />
                <RsgxZygxView v-if="tab.name === 'RsgxZygxView'" />
                <RsgxQqgxView v-if="tab.name === 'RsgxQqgxView'" />
                <RsgxCjgxView v-if="tab.name === 'RsgxCjgxView'" />
                <RsgxNpcView v-if="tab.name === 'RsgxNpcView'" />
                <RsccGdzcView v-if="tab.name === 'RsccGdzcView'" />
                <RsccYhccView v-if="tab.name === 'RsccYhccView'" />
                <RsccCctjView v-if="tab.name === 'RsccCctjView'" />
                <RsccXjView v-if="tab.name === 'RsccXjView'" />
                <SdzzView v-if="tab.name === 'SdzzView'" />
                <SystemParamsView v-if="tab.name === 'SystemParamsView'" />
                <SystemParamLogView v-if="tab.name === 'SystemParamLogView'" />
                <RsrjWdrjView v-if="tab.name === 'RsrjWdrjView'" />
                <RsrjXrjView v-if="tab.name === 'RsrjXrjView'" />
                <RsrjTjView v-if="tab.name === 'RsrjTjView'" />
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-main>
      <div class="footer">
        健康管理系统 © 2023 版权所有 | 版本号 v2.1.5
      </div>
      <el-dialog title="修改密码" :visible.sync="showPwdDialog" width="350px">
        <el-form :model="pwdForm" ref="pwdForm">
          <el-form-item label="新密码" prop="password">
            <el-input v-model="pwdForm.password" type="password" placeholder="请输入新密码"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showPwdDialog = false">取 消</el-button>
          <el-button type="primary" @click="submitPwd">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import PersonnelList from './PersonnelList.vue';
import RkdView from './RkdView.vue';
import CkdView from './CkdView.vue';
import IndexPagVew from './IndexPagVew.vue';
import RsgxZygxView from './RsgxZygxView.vue';
import RsgxQqgxView from './RsgxQqgxView.vue';
import RsgxCjgxView from './RsgxCjgxView.vue';
import RsgxNpcView from './RsgxNpcView.vue';
import RsccGdzcView from './RsccGdzcView.vue';
import RsccYhccView from './RsccYhccView.vue';
import RsccCctjView from './RsccCctjView.vue';
import RsccXjView from './RsccXjView.vue';
import SdzzView from './SdzzView.vue';
import SystemParamsView from './SystemParamsView.vue';
import SystemParamLogView from './SystemParamLogView.vue';
import RsrjWdrjView from './RsrjWdrjView.vue';
import RsrjXrjView from './RsrjXrjView.vue';
import RsrjTjView from './RsrjTjView.vue';

export default {
  name: "indexView",
  components: {
    PersonnelList,
    RkdView,
    CkdView,
    IndexPagVew,
    RsgxZygxView,
    RsgxQqgxView,
    RsgxCjgxView,
    RsgxNpcView,
    RsccGdzcView,
    RsccYhccView,
    RsccCctjView,
    RsccXjView,
    SdzzView,
    SystemParamsView,
    SystemParamLogView,
    RsrjWdrjView,
    RsrjXrjView,
    RsrjTjView
  },
  data() {
    return {
      activeTab: 'PersonnelList',
      tabs: [],
      isCollapsed: false,
      showPwdDialog: false,
      pwdForm: {
        password: ''
      },
      menuSearch: '',
      menuList: [
        { index: 'IndexPagVew', title: '首页', icon: 'el-icon-s-home' },
        { index: 'PersonnelList', title: '体检人员管理', icon: 'el-icon-user' },
        { index: 'Reports', title: '体检报告', icon: 'el-icon-document' },
        { index: 'Statistics', title: '数据统计', icon: 'el-icon-data-line' },
        { index: 'RkdView', title: '入库单', icon: 'el-icon-document', parent: 'test' },
        { index: 'CkdView', title: '出库单', icon: 'el-icon-document', parent: 'test' },
        { index: 'RsgxZygxView', title: '重要关系', parent: 'rsgx' },
        { index: 'RsgxQqgxView', title: '亲戚关系', parent: 'rsgx' },
        { index: 'RsgxCjgxView', title: '初见关系', parent: 'rsgx' },
        { index: 'RsgxNpcView', title: 'NPC人物', parent: 'rsgx' },
        { index: 'RsccGdzcView', title: '固定资产', parent: 'rscc' },
        { index: 'RsccYhccView', title: '银行财产', parent: 'rscc' },
        { index: 'RsccCctjView', title: '财产统计', parent: 'rscc' },
        { index: 'RsccXjView', title: '现金', parent: 'rscc' },
        { index: 'SdzzView', title: '所到之处', icon: 'el-icon-location-outline' },
        { index: 'SystemParamsView', title: '系统参数', parent: 'settings' },
        { index: 'SystemParamLogView', title: '参数修改记录', parent: 'settings' },
        { index: 'RsrjWdrjView', title: '我的日记', parent: 'rsrj' },
        { index: 'RsrjXrjView', title: '写日记', parent: 'rsrj' },
        { index: 'RsrjTjView', title: '日记统计', parent: 'rsrj' },
      ],
      menuGroups: [
        { index: 'test', title: '测试二级', icon: 'el-icon-menu' },
        { index: 'rsgx', title: '人生关系', icon: 'el-icon-s-custom' },
        { index: 'rscc', title: '人生财产', icon: 'el-icon-s-finance' },
        { index: 'settings', title: '系统设置', icon: 'el-icon-setting' },
        { index: 'rsrj', title: '人生日记', icon: 'el-icon-notebook-2' },
      ],
      componentMap: {
        PersonnelList: {
          title: "体检人员",
          icon: "el-icon-user",
          stats: { total: 1242, monthly: 86, daily: 12, completion: 92 }
        },
        Reports: {
          title: "体检报告",
          icon: "el-icon-document",
          stats: { total: 986, monthly: 72, daily: 8, completion: 87 }
        },
        Statistics: {
          title: "数据统计",
          icon: "el-icon-data-line",
          stats: { total: 24, monthly: 3, daily: 0, completion: 100 }
        },
        Settings: {
          title: "系统设置",
          icon: "el-icon-setting",
          stats: { total: 12, monthly: 1, daily: 0, completion: 100 }
        },
        RkdView: {
          title: "入库单",
          icon: "el-icon-document",
          stats: { total: 0, monthly: 0, daily: 0, completion: 0 }
        },
        CkdView: {
          title: "出库单",
          icon: "el-icon-document",
          stats: { total: 0, monthly: 0, daily: 0, completion: 0 }
        },
        IndexPagVew: {
          title: "首页",
          icon: "el-icon-s-home",
          stats: { total: 0, monthly: 0, daily: 0, completion: 0 }
        },
        RsgxZygxView: { title: '重要关系', icon: 'el-icon-user', stats: { total: 0, monthly: 0, daily: 0, completion: 0 } },
        RsgxQqgxView: { title: '亲戚关系', icon: 'el-icon-user', stats: { total: 0, monthly: 0, daily: 0, completion: 0 } },
        RsgxCjgxView: { title: '初见关系', icon: 'el-icon-user', stats: { total: 0, monthly: 0, daily: 0, completion: 0 } },
        RsgxNpcView: { title: 'NPC人物', icon: 'el-icon-user', stats: { total: 0, monthly: 0, daily: 0, completion: 0 } },
        RsccGdzcView: { title: '固定资产', icon: '', stats: { total: 0, monthly: 0, daily: 0, completion: 0 } },
        RsccYhccView: { title: '银行财产', icon: '', stats: { total: 0, monthly: 0, daily: 0, completion: 0 } },
        RsccCctjView: { title: '财产统计', icon: '', stats: { total: 0, monthly: 0, daily: 0, completion: 0 } },
        RsccXjView: { title: '现金', icon: '', stats: { total: 0, monthly: 0, daily: 0, completion: 0 } },
        SdzzView: { title: '所到之处', icon: 'el-icon-location-outline', stats: { total: 0, monthly: 0, daily: 0, completion: 0 } },
        SystemParamsView: { title: '系统参数', icon: 'el-icon-setting', stats: { total: 0, monthly: 0, daily: 0, completion: 0 } },
        SystemParamLogView: { title: '参数修改记录', icon: 'el-icon-setting', stats: { total: 0, monthly: 0, daily: 0, completion: 0 } },
        RsrjWdrjView: { title: '我的日记', icon: 'el-icon-notebook-2', stats: { total: 0, monthly: 0, daily: 0, completion: 0 } },
        RsrjXrjView: { title: '写日记', icon: 'el-icon-edit-outline', stats: { total: 0, monthly: 0, daily: 0, completion: 0 } },
        RsrjTjView: { title: '日记统计', icon: 'el-icon-data-analysis', stats: { total: 0, monthly: 0, daily: 0, completion: 0 } },
      }
    };
  },
  computed: {
    currentTitle() {
      const tab = this.tabs.find(t => t.name === this.activeTab);
      return tab ? `${tab.title}管理` : '健康管理系统';
    },
    filteredMenu() {
      const search = this.menuSearch.trim().toLowerCase();
      const groups = this.menuGroups.map(group => ({ ...group, children: [] }));
      const result = [];
      this.menuList.forEach(item => {
        if (item.parent) {
          const group = groups.find(g => g.index === item.parent);
          if (group) group.children.push(item);
        } else {
          result.push({ ...item });
        }
      });
      groups.forEach(g => {
        if (g.children.length) result.push(g);
      });
      if (!search) return result;
      // 过滤
      return result
        .map(menu => {
          if (menu.children) {
            const filteredChildren = menu.children.filter(sub => sub.title.toLowerCase().includes(search));
            if (filteredChildren.length) return { ...menu, children: filteredChildren };
            if (menu.title.toLowerCase().includes(search)) return { ...menu };
            return null;
          } else {
            if (menu.title.toLowerCase().includes(search)) return menu;
            return null;
          }
        })
        .filter(Boolean);
    }
  },
  created() {
    this.addTab('IndexPagVew');
  },
  methods: {
    addTab(name) {
      if (!this.tabs.find((tab) => tab.name === name)) {
        this.tabs.push({
          name,
          title: this.componentMap[name].title,
          icon: this.componentMap[name].icon,
          stats: this.componentMap[name].stats
        });
      }
      this.activeTab = name;
    },
    removeTab(name) {
      if (this.tabs.length <= 1) return;
      const index = this.tabs.findIndex((tab) => tab.name === name);
      this.tabs.splice(index, 1);
      if (this.activeTab === name) {
        this.activeTab = this.tabs[Math.max(index - 1, 0)].name;
      }
    },
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed;
    },
    handleUserCommand(command) {
      if (command === 'logout') {
        localStorage.removeItem('isLoggedIn');
        localStorage.removeItem('username');
        window.location.reload();
      } else if (command === 'changePwd') {
        this.showPwdDialog = true;
      }
    },
    submitPwd() {
      this.$message.success('密码修改成功（仅演示效果）');
      this.showPwdDialog = false;
      this.pwdForm.password = '';
    },
    handleMenuSearch() {
      // 只需触发computed刷新
    },
    highlightMenu(title) {
      if (!this.menuSearch) return title;
      const reg = new RegExp(this.menuSearch, 'ig');
      return title.replace(reg, match => `<span style="color:#4a9eff;">${match}</span>`);
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
  margin: 0;
  /* background-color: #f5f7fa; */
  overflow: hidden;
}
.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}
.sidebar {
  height: 100%;
  background: linear-gradient(180deg, #1a2a4f 0%, #0d1a33 100%);
  box-shadow: 3px 0 15px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  z-index: 10;
  transition: all 0.3s ease;
}
.sidebar.collapsed {
  width: 70px;
}
.logo-container {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.logo-image {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #4a9eff, #6c5ce7);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  box-shadow: 0 4px 10px rgba(74, 158, 255, 0.3);
}
.logo-title {
  color: white;
  font-size: 20px;
  font-weight: 600;
  margin-left: 12px;
  letter-spacing: 0.5px;
}
.custom-menu {
  background-color: transparent !important;
  border: none;
  padding: 20px 10px;
  flex: 1;
}
.custom-menu .el-menu-item {
  height: 56px;
  line-height: 56px;
  margin: 8px 0;
  border-radius: 8px;
  /* color: #a4b1cd !important; */
  color: white !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  padding-left: 20px !important;
  position: relative;
  overflow: hidden;
  background: transparent !important;
}
/* .custom-menu .el-menu-item:hover {
  background: rgba(74, 158, 255, 0.15) !important;
  color: #fff !important;
  transform: translateX(5px);
} */
.custom-menu .el-menu-item:hover .menu-icon {
  color: #4a9eff !important;
  transform: scale(1.15);
}
.custom-menu .el-menu-item.is-active {
  background: linear-gradient(90deg, rgba(74, 158, 255, 0.3), transparent) !important;
  color: #fff !important;
  border-left: 4px solid #4a9eff;
}

.custom-menu .el-menu-item.is-active .menu-icon {
  color: #4a9eff !important;
}
.menu-icon {
  font-size: 20px !important;
  margin-right: 16px;
  transition: all 0.3s ease;
  width: 24px;
  text-align: center;
}
.menu-text {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.menu-item-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(74, 158, 255, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}
.el-menu-item:hover .menu-item-bg {
  opacity: 1;
}
.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.el-header {
  background: white;
  height: 70px !important;
  display: flex;
  align-items: center;
  padding: 0 30px;
  border-bottom: 1px solid #eaeef5;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.header-title {
  font-size: 22px;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
}
.header-actions {
  margin-left: auto;
  display: flex;
  gap: 20px;
}
.header-action-btn {
  background: #f5f7fa;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #5a6d8a;
  position: relative;
}
.header-action-btn:hover {
  background: #4a9eff;
  color: white;
  transform: translateY(-2px);
}
.el-main {
  padding: 25px;
  background-color: #f5f7fa;
  overflow: auto;
}
.tabs-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}
.el-tabs__header {
  margin: 0 !important;
  background: linear-gradient(90deg, #f9fbfd, #ffffff);
  border-bottom: 1px solid #eaeef5;
}
.el-tabs__item {
  font-weight: 500;
  padding: 0 25px !important;
  height: 45px !important;
  line-height: 45px !important;
}
.tab-content {
  padding: 30px;
  min-height: 300px;
}
.content-title {
  font-size: 24px;
  color: #2c3e50;
  margin-bottom: 25px;
}
.content-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 25px;
}
.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: linear-gradient(135deg, #4a9eff, #6c5ce7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 22px;
  margin-right: 15px;
}
.card-title {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
}
.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}
.stat-card:hover {
  transform: translateY(-5px);
}
.stat-title {
  color: #5a6d8a;
  font-size: 14px;
  margin-bottom: 10px;
}
.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 5px;
}
.stat-trend {
  display: flex;
  align-items: center;
  color: #4cd964;
  font-size: 14px;
  font-weight: 500;
}
.footer {
  text-align: center;
  padding: 20px;
  color: #7f8c9a;
  font-size: 14px;
  border-top: 1px solid #eaeef5;
  background: white;
}
@media (max-width: 992px) {
  .sidebar {
    width: 70px;
  }
  .logo-title, .menu-text {
    display: none;
  }
  .logo-container {
    justify-content: center;
  }
  .custom-menu .el-menu-item {
    justify-content: center;
    padding-left: 0 !important;
  }
  .menu-icon {
    margin-right: 0;
    font-size: 22px !important;
  }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.content-card {
  animation: fadeIn 0.5s ease-out;
}

.custom-menu .el-submenu__title {
  height: 56px;
  line-height: 56px;
  margin: 8px 0;
  border-radius: 8px;
  color: #a4b1cd !important;
  padding-left: 20px !important;
  display: flex;
  align-items: center;
  position: relative;
  background: transparent !important;
  transition: all 0.3s ease;
}

.menu-text{
  color: white !important;
}

.custom-menu .el-submenu__title:hover {
  background: rgba(74, 158, 255, 0.15) !important;
  color: #fff !important;
  transform: translateX(5px);
}

.custom-menu .el-submenu__title:hover .menu-icon {
  color: #4a9eff !important;
  transform: scale(1.15);
}

.el-menu--dark .el-submenu__title:hover {
  background-color: transparent !important;
}

::v-deep(.custom-menu .el-submenu__title:hover) {
  background: rgba(74, 158, 255, 0.15) !important;
  color: #fff !important;
}
.custom-menu .el-submenu .el-menu-item:hover {
  background: rgba(74, 158, 255, 0.15) !important;
  color: #fff !important;
  transform: translateX(5px);
}
 /* 先测试这个基础样式，看背景颜色是否生效 */
.custom-menu >>> .el-menu-item {
  background-color: transparent !important;
  color: #a4b1cd !important;
}
.el-menu {
    border-right: solid 1px #e6e6e6;
    list-style: none;
    position: relative;
    margin: 0;
    padding-left: 0;
    background-color: transparent !important;

}
.menu-search-bar {
  padding: 0 18px 8px 18px;
  background: none;
}
.custom-menu-search {
  width: 120px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #fff !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.13) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 6px;
  margin-bottom: 2px;
  transition: border-color 0.2s;
}
.custom-menu-search .el-input__inner {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,0.85) !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-size: 13px;
  height: 28px;
  line-height: 28px;
  outline: none;
}
.custom-menu-search .el-input__inner::placeholder {
  color: rgba(255,255,255,0.5) !important;
  opacity: 1;
}
.custom-menu-search .el-input__inner:focus {
  border-bottom: 1.5px solid #4a9eff !important;
}
.custom-menu-search:focus-within {
  border-bottom: 1.5px solid #4a9eff !important;
}
</style> 